<template>
    <div class="transition_sur">
        <div class="col" v-for="(item, index) in surInfo?.surPlayerNames ?? new Array(4).fill({})" :key="index">
            <div class="char_container">
                <div class="img" :style="{
                    backgroundImage: `url(${choosePersonUrl[index]})`
                }"></div>
            </div>
            <div class="name_space">
                <p>{{ item }}</p>
                <div class="talent_item">
                    <img v-if="surInfo.surTalent[index].hgfz" src="../../assets/images/talent/回光返照.png">
                    <img v-if="surInfo.surTalent[index].xtfs" src="../../assets/images/talent/膝跳反射.png">
                    <img v-if="surInfo.surTalent[index].hxwy" src="../../assets/images/talent/化险为夷.png">
                    <img v-if="surInfo.surTalent[index].flxy" src="../../assets/images/talent/飞轮效应.png">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
const props = defineProps<{
    surInfo: SurInfo
}>();
const choosePersonUrl = reactive<string[]>([])
const { stop } = watch(() => { return props.surInfo.surChars }, async (newVal) => {
    choosePersonUrl.length = 0;
    const surPromises = newVal.map(async (char, i) => {
        if (char) {
            const res = await import(`@/assets/images/surHalf/${char}.png`);
            choosePersonUrl[i] = res.default as string;
        }
    });
    // 等待所有图片加载完成
    await Promise.all([...surPromises]);
});
onUnmounted(()=>{
    stop();
})
</script>
<style scoped lang='scss'>
$border-color: #72604c;

.transition_sur {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    height: 100%;
    grid-area: Left;
    background:url("@/assets/images/transition-bg.png");
    .col {
        box-sizing: border-box;
        border-right: 3px solid $border-color;

        &:nth-child(2),
        &:first-child {
            border-bottom: 3px solid $border-color;
        }

        display: grid;
        grid-template-rows: auto 30px;

        .char_container {
            height: 100%;
            width: 100%;
            background: linear-gradient(to bottom, transparent 0%, transparent 70%, #6d923790 100%);
            position: relative;

            .img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;

                background-size: cover;
                background-repeat: no-repeat;
            }
        }

        .name_space {
            background: #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #fff;
            padding: 0 1em;

            .talent_item {
                display: flex;
                align-items: center;
                justify-content: flex-end;

                img {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
}
</style>